<template>
    <div class="footer-container">
    <div class="class">
        <div class="class-one">
            <img src="../img/footer-home.png.png" alt="" @click="tohome()" class="imgOne">
            <div class="homePage">首页</div>
        </div>
        <div class="class-two">
            <img src="../img/footer-find.png.png" alt="" class="imgOne">
            <div class="find">发现</div>
        </div>
        <div class="class-three">
            <img src="../img/footer-pay.png.png" alt="" @click="toOrder()" class="imgOne">
            <div class="payOrder">订单</div>
        </div>
        <div class="class-four">
            <img src="../img/footer-kid.png.png" alt="" class="imgOne" @click="toRes()">
            <div class="kid">我的</div>
        </div>
    </div>
    </div>
</template>
<style>
.footer-container{
    position: fixed;  
    left: 0;  
    bottom: 0;  
    width: 100%;  
}
.class{
    display: flex;
    justify-content: space-between;
    height: 80px;
    border-top: 1px solid #dddddd;
    background-color: rgba(255, 255, 255, 0.8);
    ;
    
}
.imgOne{
    height: 60%;
}
</style>
<script>
export default{
    data(){
        return{
            user:{}
        }
    },
    created(){
        this.user = this.$getSessionStorage('user')
    },
    methods:{
        tohome(){

            this.$router.push({path: '/'});
        },
        toOrder(){
            if(this.user==null){
                this.$router.push({path:'/login'});
                return;
            }else{
            this.$router.push({path:'/OrderList'});
            }
        },
        toRes(){
            this.$router.push({path:'./login'})
        }
    }
    
}
</script>